<template>
  <div id="user">
    <Row type="flex" justify="center" class="login_box" v-if="!if_login">
        <Col class="login" :md="{span:10}" :xs="{span:21}">
        <Card :padding="15">
          <Tabs>
            <TabPane label="登录" icon="md-contact">
              <!-- <Divider orientation="left">登录</Divider> -->
              <login style="margin-top:10%;"></login>
            </TabPane>
            <TabPane label="注册" icon="md-person-add">
              <!-- <Divider orientation="left">注册</Divider> -->
              <sign></sign>
            </TabPane>
          </Tabs>
        </Card>
        </Col>
    </Row>
    <Row v-if="if_login">
      <Row type="flex" justify="center" class="user_box">
          <Col class="login" :md="{span:10}" :xs="{span:21}">
            <user></user>
          </Col>
      </Row>
    </Row>
  </div>
</template>

<script>
  import Login from '@/components/Login'
  import Sign  from '@/components/Sign'
  import User  from '@/components/User'
  export default {
    name: 'User',
    data() {
      return {
        if_login: false,
        user_data:''
      }
    },
    components: {
      'login': Login,
      'sign': Sign,
      'user':User
    },
    methods: {
      ifLogin(){
        if (sessionStorage.getItem("userdata")) {
          this.if_login = true;
          this.user_data = JSON.parse(sessionStorage.getItem("userdata"));
        } else {
          this.if_login = false;
        }
      }
    },
    created() {
      this.ifLogin();
    },
    mounted() {
    },
  }
</script>
<style scoped>
.login_box,.user_box{
  margin: 5px;
  margin-top:100px;
}
</style>
